<template>
  <div
    style="user-select: text !important"
    :style="{ '--theme': $store.getters.themeColor }"
    class="eventDetailWrapper"
  >
    <el-row>
      <el-row class="z-tabbox">
        <event-process
          :getOrderInfo="getOrderInfo"
          :orderData.sync="viewDataSource"
          :reldevice.sync="reldevice"
          :monitors.sync="monitors"
          :videoData.sync="videoInfo"
          :imgsList.sync="imgsList"
          :warningOrderId.sync="orderId"
          isDetail
          :hideCollectBtn="!!orderIdValue"
          :orderDetail.sync="orderDetail"
        />
        <el-row style="margin-top: 10px">
          <!-- 右侧 -->
          <el-col :span="18">
            <el-col :span="24" class="buttons">
              <el-button
                :class="['buttonClass1', isShowView === 0 ? 'active' : '']"
                @click="changeFun(0)"
              >
                基本信息
              </el-button>
              <el-button
                :class="['buttonClass1', isShowView === 7 ? 'active' : '']"
                @click="changeFun(7)"
                v-if="userIdIsShow"
              >
                详细信息
              </el-button>
              <el-button
                :class="['buttonClass1', isShowView === 11 ? 'active' : '']"
                @click="changeFun(11)"
                v-if="alarmIsShow"
              >
                关联告警{{ relatedData.length }}
              </el-button>
              <template v-for="item in linkIdList">
                <el-button
                  :key="item.linkId"
                  :class="[
                    'buttonClass1',
                    isShowView == item.realLinkType ? 'active' : '',
                  ]"
                  @click="changeFun(item.realLinkType)"
                >
                  {{ nameType(item.realLinkType, item.linkName) }}
                </el-button>
              </template>
              <el-button
                :class="['buttonClass1', isShowView === 81 ? 'active' : '']"
                @click="changeFun(81)"
              >
                办理过程
              </el-button>
              <el-button
                :class="['buttonClass1', isShowView === 9 ? 'active' : '']"
                @click="changeFun(9)"
              >
                领导批示
              </el-button>
              <!-- <el-button
                class="buttonClass1"
                size="small"
                style="box-shadow: 0 0 0 0 transparent !important"
                :style="{
                  background:
                    isShowView == 0 ? '#22222C!important' : '#FFFFFF!important',
                }"
                @click="changeFun(0)"
                ><span>基本信息</span></el-button
              >
              <el-button
                class="buttonClass1"
                size="small"
                style="box-shadow: 0 0 0 0 transparent !important"
                :style="{
                  background:
                    isShowView == 11 ? '#22222C!important' : '#FFFFFF!important',
                }"
                @click="changeFun(11)"
                ><span>关联告警</span>
                <span>{{ relatedData.length }}</span></el-button
              > -->
              <!--          <el-button class="buttonClass" size="small" :style="{'background':isShowView==6?'#22222C':'#FFFFFF'}"-->
              <!--                     @click="changeFun(6)"><span>超期管理</span></el-button>-->
              <!--          <el-button class="buttonClass" size="small" :style="{'background':isShowView==8?'#22222C':'#FFFFFF'}"-->
              <!--                     @click="changeFun(8)"><span>催办管理</span></el-button>-->
              <!-- <template>
                <el-button
                  class="buttonClass1"
                  size="small"
                  v-for="item in linkIdList"
                  :key="item.linkId"
                  style="box-shadow: 0 0 0 0 transparent !important"
                  :style="{
                    background:
                      isShowView == item.linkId
                        ? '#22222C!important'
                        : '#FFFFFF!important',
                  }"
                  @click="changeFun(item.linkId)"
                  ><span>{{
                    nameType(item.linkId, item.linkName)
                  }}</span></el-button
                >
              </template>
              <el-button
                class="buttonClass1"
                size="small"
                style="box-shadow: 0 0 0 0 transparent !important"
                :style="{
                  background:
                    isShowView == 81 ? '#22222C!important' : '#FFFFFF!important',
                }"
                @click="changeFun(81)"
                ><span>办理过程</span></el-button
              >
              <el-button
                class="buttonClass1"
                size="small"
                style="box-shadow: 0 0 0 0 transparent !important"
                :style="{
                  background:
                    isShowView == 9 ? '#22222C!important' : '#FFFFFF!important',
                }"
                @click="changeFun(9)"
                ><span>领导批示</span></el-button
              > -->
              <!-- <el-button class="buttonClass1" size="small" style="box-shadow: 0 0 0 0 transparent!important;"
                        :style="{'background':isShowView==10?'#22222C!important':'#FFFFFF!important'}"
                        @click="changeFun(10)"><span>时间轴  </span></el-button> -->
            </el-col>
            <el-col :span="24" class="leftClass" v-show="isShowView === 0">
              <el-row>
                <el-col :span="24" class="rightview">
                  <el-col :span="12">
                    <custom-title name="事件信息"></custom-title>
                    <alarm-info
                      :orderData="viewDataSource"
                      :position="position"
                      :monitors="monitors"
                      hiddenTitle
                      isDetail
                      :rightLabelCol="8"
                      style="margin-bottom: 30px"
                    />
                    <custom-title name="告警来源"></custom-title>
                    <alarm-source
                      :orderData="viewDataSource"
                      :reldeviceData="reldevice"
                      :positionMonitor="positionMonitor"
                      hiddenTitle
                    />
                  </el-col>
                  <el-col :span="12">
                    <div class="right">
                      <medias-comp
                        :imgs="imgsList"
                        :order="viewDataSource"
                        :video="videoInfo"
                        :position.sync="position"
                        :positionMonitor.sync="positionMonitor"
                      />
                    </div>
                  </el-col>
                  <!-- <el-col
                    :span="24"
                    class="left-footer"
                    v-if="!this.orderIdValue"
                  >
                    <div class="line2"></div>
                    <div class="button-container">
                      <el-button
                        v-hasPermi="['event:details:collect']"
                        v-if="collectAble && viewDataSource.isCollection === '0'"
                        class="buttonClass el-button-Query"
                        icon="el-icon-star-off"
                        @click="
                          changeCollectStatus(
                            viewDataSource.warningOrderId,
                            viewDataSource.alarmTime,
                            viewDataSource.isCollection
                          )
                        "
                        ><span>收藏</span>
                      </el-button>

                      <el-button
                        v-hasPermi="['event:details:collect']"
                        v-else-if="
                          collectAble && viewDataSource.isCollection === '1'
                        "
                        class="buttonClass el-button-Query"
                        icon="el-icon-star-on"
                        @click="
                          changeCollectStatus(
                            viewDataSource.warningOrderId,
                            viewDataSource.alarmTime,
                            viewDataSource.isCollection
                          )
                        "
                        ><span>取消收藏</span>
                      </el-button>

                      <el-button
                        style="float: right"
                        plain
                        @click="returnFun"
                        v-hasPermi="['event:details:return']"
                        ><span>返回</span></el-button
                      >
                    </div>
                  </el-col> -->
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24" v-show="isShowView !== 0" class="eventDetailAll">
              <alarm-detail-info
                v-show="isShowView === 7"
                :detailData="orderDetail"
              />
              <command-dispatch-process
                v-show="isShowView === 8"
                :viewDataSouse="commandDispatchDataSource"
              >
              </command-dispatch-process>
              <dev-process
                v-show="isShowView === '1'"
                :viewDataSouse="judgeDataSource"
                :judgeResult="judgeResult"
              ></dev-process>
              <scheduling-process
                v-show="isShowView === '2'"
                :viewDataSouse="dispatchDataSource"
              ></scheduling-process>
              <disposal-process
                v-show="isShowView === '4'"
                :viewDataSouse="disposalDataSource"
              ></disposal-process>
              <verification-process
                v-show="isShowView === '5'"
                :viewDataSouse="verificationDataSource"
              ></verification-process>
              <underway-process
                v-show="isShowView === 81"
                :viewDataSouse="dwpDataSource"
              ></underway-process>
              <leadership-instructions
                v-show="isShowView === 9"
                :viewDataSouse="leaderDataSource"
              ></leadership-instructions>
              <timer-shaft
                ref="timershaft"
                v-show="isShowView === 10"
                :orderId="orderId"
                :eChartsHeight="eChartsHeight"
                :eChartsWidth="eChartsWidth"
              ></timer-shaft>
              <!-- <el-collapse
                accordion
                v-show="isShowView === 11"
                :height="pageHeight"
              >
                <el-collapse-item
                  v-for="item in relatedData"
                  :key="item"
                  :dataSource="viewDataSource"
                >
                  <template slot="title">
                    <span class="title-class" style="margin: 0px 0px 10px 20px"
                      ><div class="title">
                        <span class="icon"></span
                        ><span class="title-name">{{
                          viewDataSource.alarmBody
                        }}</span>
                      </div></span
                    >
                  </template>
                  <alarmPanel :dataSource="viewDataSource" :alarmid="item" />
                </el-collapse-item>
              </el-collapse> -->
              <el-tabs
                v-show="isShowView === 11"
                :height="pageHeight"
                tab-position="left"
                v-model="activeName"
                class="tabsPane"
              >
                <template v-for="(item, index) in relatedData">
                  <el-tab-pane :name="index + ''" :key="item.warningOrderId">
                    <span
                      slot="label"
                      :key="item.warningOrderId"
                      class="tabPane"
                    >
                      <div
                        style="
                          width: 25px;
                          height: 25px;
                          padding: 3.5px;
                          border-radius: 16px;
                        "
                      >
                        {{ index + 1 }}
                      </div>
                      <div
                        v-if="index != relatedData.length - 1"
                        style="
                          width: 1px;
                          height: 24px;
                          background: #dcdfe6;
                          margin: 6px auto 0;
                        "
                      />
                    </span>
                    <!-- <alarmPanel :dataSource="viewDataSource" :alarmid="index" /> -->

                    <alarmPanel
                      :dataSource="relatedData[index]"
                      :mainAlarmInfo="{
                        emergencyLevelName: viewDataSource.emergencyLevelName,
                        address: viewDataSource.address,
                      }"
                      :alarmid="index + ''"
                    />
                  </el-tab-pane>
                </template>
              </el-tabs>
            </el-col>
          </el-col>
          <!-- 左侧 -->
          <el-col :span="6">
            <el-col>
              <timeLineModel
                class="timeLineModel"
                :timeline="allDataSource"
                :viewDataSource="viewDataSource"
                :height="pageHeight"
              ></timeLineModel>
            </el-col>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
    <audio
      id="audioid"
      style="height: 0px !important; width: 0px"
      :src="viewDataSource.voice"
      controls="controls"
    ></audio>
  </div>
</template>

<script>
import $ from "jquery";
import alarmPanel from "@/views/pages/eventManagement/alarmPanel";
import timeLineModel from "@/views/pages/eventManagement/timeLine";
import { $getUrlParam } from "@/utils/public";
import DevProcess from "@/views/pages/eventManagement/eventDetailAll/devProcess";
import VerificationProcess from "@/views/pages/eventManagement/eventDetailAll/verificationProcess";
import OverdueManagement from "@/views/pages/eventManagement/eventDetailAll/overdueManagement";
import CuibanManagement from "@/views/pages/eventManagement/eventDetailAll/cuibanManagement";
import UnderwayProcess from "@/views/pages/eventManagement/eventDetailAll/underwayProcess";
import LeadershipInstructions from "@/views/pages/eventManagement/eventDetailAll/leadershipInstructions";
import DisposalProcess from "@/views/pages/eventManagement/eventDetailAll/disposalProcess";
import SchedulingProcess from "@/views/pages/eventManagement/eventDetailAll/schedulingProcess";
import commandDispatchProcess from "@/views/pages/eventManagement/eventDetailAll/commandDispatchProcess";
import TimerShaft from "@/views/pages/eventManagement/eventDetailAll/timerShaft";
import { $store } from "@/utils/store";
import {
  getLeaderListByOrderId,
  getRecordByType,
  getOrderInfo,
  getRecordByOrderId,
  getVideoPlaybackUrl,
  queryFlowLink,
  warningOrderInfoRel,
} from "@/api/modules/eventManagement/eventDetail";
// import EventJudgeMap from '../alarmEvent/eventJudgeMap';
import "@/assets/font/iconfont.css";
import { getQueryString } from "@/utils/common";
import CustomTitle from "./Title.vue";
import MediasComp from "./Medias.vue";
import EventProcess from "./eventProcess.vue";
import AlarmInfo from "@/components/eventManagement/infos/AlarmInfo";
import AlarmSource from "@/components/eventManagement/infos/AlarmSource";
import AlarmDetailInfo from "./infos/AlarmDetailInfo.vue";
export default {
  components: {
    EventProcess,
    CustomTitle,
    TimerShaft,
    SchedulingProcess,
    DisposalProcess,
    LeadershipInstructions,
    UnderwayProcess,
    CuibanManagement,
    OverdueManagement,
    VerificationProcess,
    DevProcess,
    timeLineModel,
    alarmPanel,
    commandDispatchProcess,
    MediasComp,
    AlarmInfo,
    AlarmSource,
    AlarmDetailInfo,
  },
  inject: {
    orderIdValue: {
      // 通过该字段判断打开是页面还是弹框
      default: "",
    },
  },
  watch: {
    viewDataSource(val) {
      this.getFlowAttr(val);
    },
    orderId(val) {
      this.getRecordByOrder();
      this.warningOrderInfoRel(val);
      this.changeFun(this.isShowView);
    },
  },
  created() {
    let info = $store.get("$loginInfo");
    this.power = [];
    if (info.power && info.power["/rpnEeventMt"]) {
      this.power = info.power["/rpnEeventMt"];
    }
    if (info.power && info.power["/fAlarmManagement"]) {
      for (let i = 0; i < info.power["/fAlarmManagement"].length; i++) {
        this.power.push(info.power["/fAlarmManagement"][i]);
      }
    }
  },
  mounted() {
    this.urlSource = getQueryString("type");
    this.oldOrderId = getQueryString("oldOrderId");
    this.oldList = getQueryString("oldList");
    this.eChartsHeight = "600px";
    this.eChartsWidth = $(".eventDetailAll").width() + "px";
    this.pageHeight = "688px";
    this.getUserState();
  },
  methods: {
    warningOrderInfoRel(orderId) {
      let params = {
        userId: this.$store.getters.userInfo.userId,
        appVerCode: this.$store.getters.userInfo.chooseAppVerCode,
        duplicateOrderId: orderId,
      };
      warningOrderInfoRel(params).then((res) => {
        if (res.code == 200) {
          this.relatedData = res.data;
          if (res.data) {
            this.alarmIsShow = res.data.length === 0 ? false : true;
          }
        }
      });
    },
    onPlayerPlay(player) {
      player.play();
    },
    warningType(val) {
      switch (val) {
        case "1":
          return "AI自动上报";
        case "2":
          return "人工上报";
        case "3":
          return "一键告警";
        case "7":
          return "行业告警";
      }
    },
    getUserState() {
      let user = this.$store.getters.userInfo;
      this.userIdIsShow = user.tenantId ? false : true;
    },
    //返回按钮
    returnFun() {
      let _this = this;
      switch (_this.urlSource) {
        case "0":
          // _this.$router.go(-1);
          // $v.jumpMenuKeep(_this, '/event');
          // this.$router.go(-1);

          if ($getUrlParam("fromLeader") === "true") {
            this.$router.push({ path: "/eventManagement/leadDirection" });
            return;
          }
          if ($getUrlParam("pageType") === "false") {
            this.$router.push({ path: "/eventManagement" });
          } else {
            this.$router.push({ path: "/eventManagement/myEvent" });
          }
          return;
        case "1":
          // $v.jumpMenuKeep(_this, '/rpnEeventMt');
          _this.$router.push({ path: "/rpnEeventMt" });
          return;
        case "2":
          // $v.jumpMenuKeep(_this, '/fAlarmManagement');
          _this.$router.push({ path: "/falseAlarmManagement" });
          return;
        case "3":
          // $v.jumpMenuKeep(
          //   _this,
          //   '/eventJudge?orderId=' + _this.oldOrderId + '&orderStatus=1&flag=0'
          // );
          _this.$router.push({
            path: "/eventJudge",
            query: {
              orderId: _this.oldOrderId,
              orderStatus: 1,
              flag: 0,
              list: decodeURIComponent(this.oldList),
              pageType: "false",
            },
          });
          return;
        // 我的收藏返回
        case "4":
          // $v.jumpMenuKeep(_this, '/myFavorites');
          _this.$router.push({ path: "/eventManagement/myEvent" });
          return;
      }
    },
    authority() {
      let isshow = "";
      switch (this.urlSource) {
        case "0":
          // isshow=this.power.indexOf('event:alarm:judge')!=-1;
          break;
        case "1":
          isshow = ["event:repeat:return"];
          break;
        case "2":
          isshow = ["event:false:return"];
          break;
        case "3":
          // isshow=this.power.indexOf('event:alarm:judge')!=-1;
          break;
      }
      return isshow;
    },
    changeFun(val) {
      this.isShowView = val;
      switch (val) {
        case 0: //基本信息
          break;
        case "1": //研判过程
          this.getRecordByType("1");
          break;
        case "2": //调度过程
          this.getRecordByType("2");
          break;
        case "4": //处置过程
          this.getRecordByType("4");
          break;
        case "5": //核实过程
          this.getRecordByType("5");
          break;
        case "8": //指挥调度
          this.getRecordByType("8");
          break;
        case 81: //办理过程
          break;
        case 9: //领导批示
          this.getLeaderListByOrder();
          break;
        case 10: //时间轴
          this.$refs.timershaft.initeCharts();
          break;
        case 11: //关联告警
          // this.$refs.timershaft.initeCharts();
          break;
      }
    },
    nameType(val) {
      switch (val) {
        case "1": //研判过程
          return "研判过程";
        case "2": //调度过程
          return "调度过程";
        case "4": //处置过程
          return "处置过程";
        case "5": //核实过程
          return "核实过程";
        case "8": //指挥调度
          return "指挥调度";
        default:
          return linkName;
      }
    },
    getLeaderListByOrder() {
      let _this = this;
      getLeaderListByOrderId({ orderId: _this.orderId }).then((result) => {
        if (result.code === 200) {
          _this.leaderDataSource = result.data.rows;
        }
      });
      // $v.get(
      //   _this,
      //   urlEvent + '/alarm/order/getLeaderListByOrderId/' + this.orderId,
      //   '',
      //   function (result) {
      //     if (result.resultStat === 'SUCCESS') {
      //       _this.leaderDataSource = result.data;
      //     }
      //   }
      // );
    },
    getRecordByType(realLinkType) {
      let _this = this;
      let params = {
        orderId: _this.orderId,
        realLinkType: realLinkType,
        linkId: this.orderData.linkId,
      };
      if (realLinkType == "5") {
        params.queryList = 1;
      }
      getRecordByType(params).then((result) => {
        if (result.code === 200) {
          switch (realLinkType) {
            case "1": //研判
              _this.judgeDataSource = result.data.rows;
              break;
            case "2": //调度
              _this.dispatchDataSource = result.data.rows;
              break;
            case "3": //认领
              // _this.dispatchDataSource=result.data;
              break;
            case "4": //处置
              _this.disposalDataSource = result.data.rows;
              break;
            case "5": //核实
              _this.verificationDataSource = result.data.rows;
              break;
            case "8": //指挥调度
              _this.commandDispatchDataSource = result.data.rows;
              break;
          }
        }
      });
    },
    getFlowAttr(data) {
      // const _this = this;
      queryFlowLink({
        flowId: data.flowId,
        warningSource: data.warningSource,
        templateId: data.flowTemplate,
        // linkId: this.orderData.linkId,
      }).then((res) => {
        if (res.code === 200) {
          const linkIdList = [];
          res.data.forEach((item) => {
            if (item.realLinkType != 6 && item.realLinkType != 18) {
              if (
                !linkIdList.find(
                  (obj) => obj.realLinkType == item.realLinkType
                ) &&
                item.realLinkType != "7"
              ) {
                linkIdList.push(item);
              }
            }
          });
          // if (this.temp.length > 0) {
          //   let indexA = "";
          //   linkIdList.map((item, index) => {
          //     // if (item.linkId === 8) {
          //     //   let temp = "";
          //     //   temp = this.linkIdList[index];
          //     //   this.linkIdList[index] = this.linkIdList[index - 1];
          //     //   this.linkIdList[index - 1] = temp;
          //     // }

          //     if (item.linkId == this.currentLinkId) {
          //       indexA = index;
          //     }
          //   });
          //   linkIdList.splice(indexA, 0, this.commandTab);
          // }
          this.linkIdList = linkIdList;
        }
      });
    },
    getRecordByOrder() {
      let _this = this;
      getRecordByOrderId({ orderId: _this.orderId }).then((result) => {
        if (result.code === 200) {
          _this.allDataSource = result.data.rows;
          _this.dwpDataSource = result.data.rows;
          result.data.rows.map((item, index) => {
            if (item.linkId == 8) {
              _this.temp.push(index);
            }
            //如果关闭了事件，办理过程中不显示当前环节信息
            if (item.remark && item.remark.indexOf("关闭告警") > -1) {
              result.data.rows.splice(index, 1);
            }
          });
          if (_this.temp.length) {
            let firstIndex = Math.max.apply(null, _this.temp);
            _this.currentLinkId = result.data.rows[firstIndex + 1].linkId;
          }
        }
      });
    },
    videoDataFun(data, orderData) {
      let _this = this;
      let info = _this.$store.getters.userInfo;
      let params = {
        deviceCode: orderData.deviceCode, //设备编码
        channelCode: orderData.channelCode, //通道编码
        protocolType: "3", //协议类型
        storageType: "1", //存储类型
        startTime: data.startTime, //开始时间
        endTime: data.endTime, //结束时间
        customerCode: info.tenantId, //客户编码（租户id）
      };
      getVideoPlaybackUrl(params).then((resp) => {
        if (resp && resp.code == "200") {
          _this.videoUrl = resp.data.streamUrl;
          _this.playerOptions.sources[0].src = _this.videoUrl;
        } else {
          _this.$message.warning(resp.msg);
        }
      });
      // $v.post(
      //   _this,
      //   urlVideo + '/video/getVideoPlaybackUrl',
      //   params,
      //   function (resp) {
      //     if (resp && resp.resultStat == 'SUCCESS') {
      //       _this.videoUrl = resp.data.streamUrl;
      //       _this.playerOptions.sources[0].src = _this.videoUrl;
      //     } else {
      //       $v.message({
      //         type: resp.resultStat,
      //         mess: resp.mess,
      //         data: resp.data,
      //       });
      //     }
      //   }
      // );
    },
  },
  data() {
    return {
      orderDetail: {},
      getOrderInfo,
      position: [0, 0],
      positionMonitor: [0, 0], //经纬度
      temp: [],
      commandTab: { linkId: 8 },
      currentLinkId: 0,
      linkIdList: [],
      activeName: 0,
      relatedData: [],
      showBigImageVisible: false,
      bigImageUrl: "",
      urlSource: "",
      userIdIsShow: true,
      alarmIsShow: false,
      orderId: "",
      oldOrderId: "",
      oldList: [],
      judgeResult: "", //研判结果
      judgeDataSource: [], //研判
      dispatchDataSource: [], //调度
      disposalDataSource: [], //处置
      leaderDataSource: [], //领导批示
      verificationDataSource: [], //核实
      dwpDataSource: [], //办理过程
      commandDispatchDataSource: [], //指挥调度
      pageHeight: "85%",
      eChartsWidth: "",
      eChartsHeight: "",
      isShowView: 0,
      curBtn: "基本信息",
      viewDataSource: {},
      reldevice: {}, //物联数据
      monitors: [], //物联数据事件描述列表
      imgsList: [],
      videoInfo: {},
      allDataSource: [],
      picClick: false,
      imgsListDefault: [], //图片
      videoUrl: "", //视频url
      power: [],
      orderStatus: "",
    };
  },
  computed: {
    collectAble() {
      // 可收藏能力
      return this.$store.getters.userInfo.userType === "2";
    },
  },
};
</script>

<style lang="scss" scoped>
$theme: var(--theme);

.page-til {
  font-size: 15px;
  padding: 0 0 0 10px;
}

.eventDetailWrapper {
  margin: 7px 24px;
}

.header-title {
  flex: 1;
  text-align: center;
}

// .tabsPane {
//   margin-top: 50px
//   // padding: 20px 0;
//   // height: 500px;
// }
.tabsPane >>> .el-tabs__item {
  height: 71px !important;
}
.tabsPane >>> .is-left .el-tabs__nav-prev {
  border: 0;
}
.tabsPane >>> .is-left .el-tabs__nav-next {
  border: 0;
}
.tabsPane >>> .el-tabs__active-bar {
  display: none;
}
.tabsPane .el-tabs__nav-wrap.is-left:after {
  width: 0px !important;
}
.tabsPane >>> .el-tabs__item {
  height: 70px;
  color: #606266;
}
.tabsPane >>> .el-tabs__item.is-active {
  color: #fff !important;
}
.tabPane {
  text-align: center !important;
  line-height: 20px !important;
}
.tabsPane >>> .el-tabs__item div {
  background: #f5f7fa;
}
.tabsPane >>> .el-tabs__item.is-active div {
  background: $theme;
}

.btnStyle {
  width: 9.69%;
  height: 40px;
  line-height: 40px;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #cddbe6;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #b4bdc5;
  cursor: pointer;
}

/*/deep/ .el-button {*/
/*  height: 32px;*/
/*  background: #FFFFFF;*/
/*  border-radius: 16px;*/
/*  border: 1px solid #CDDBE6;*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  padding: 0px 0px;*/
/*  font-size: 13px;*/
/*}*/

.left_pic {
  /*background: pink;*/
}

.leftpic {
  width: 100%;
  height: 40.33%;
}

.rightview {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  // box-shadow: 0px 10px 12px 3px rgba(213, 210, 233, 0.55);
  border-radius: 8px;
  margin-top: 40px;
  margin-left: 10px;
}

.icon {
  width: 8px;
  height: 8px;
  background: $theme;
  border-radius: 50%;
  display: inline-block;
  margin: 10px 5px 10px 8px;
}

.fontStyle {
  height: 30px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
}

.stepsStyle {
}

.infospace {
  margin-bottom: 1.5%;
  margin-top: 1.5%;
  float: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100%;
}

.icon {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  margin-left: 1vh;
  margin-right: 1vh;
}

.right {
  margin-right: 3vh;
  /*margin-bottom: 3vh;*/
  margin-top: 45px;
}

.buttons {
  display: flex;
  height: 30px;
}

.left-footer {
  padding: 60px 30px 10px;
  .line2 {
    height: 1px;
    border: 1px solid #ededed;
    margin-bottom: 30px;
  }

  .button-container {
    &::after {
      content: "";
      display: block;
      clear: both;
    }
    .buttonClass {
      float: right;
      margin-left: 20px;
      min-width: 76px;
      height: 28px;
      line-height: 28px;
      /*height: 4.5vh;*/
      background: $theme;
      border-radius: 12px;
      border: 1px solid $theme;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      margin-right: 0px;
      font-size: 14px !important;
      cursor: pointer;
      /deep/ .collect-icon {
        font-size: 14px;
        margin-right: 5px;
      }
    }
    .buttonClassPlain {
      float: right;
      margin-left: 20px;
      min-width: 76px;
      height: 28px;
      line-height: 28px;
      /*height: 4.5vh;*/
      border-radius: 12px;
      border: 1px solid $theme !important;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0px;
      font-size: 14px !important;
      cursor: pointer;
      background: #ffffff !important;
      color: $theme !important;
    }
  }
}

.buttonClass1 {
  flex-basis: 100%; /*平均分布方法1*/
  width: 15%;
  min-width: 30px;
  background: #ffffff;
  // border-radius: 25px;
  border: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 0px;
  color: #333333;

  &:not(:last-child) {
    border-right: 0px;
  }

  &.active {
    color: $theme;
  }

  &:focus,
  &:hover {
    background-color: transparent;
    border-color: #dcdfe6;
  }
}

.buttonClass1 span {
  width: 50px;
  height: 3vh;
  /*font-size: 14px;*/
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #b4bdc5;
  line-height: 3vh;
}

/deep/ .buttonClass1 .el-button:focus,
/deep/ .buttonClass1 .el-button:hover {
  background: #f5f5f5 !important;
  border-color: #cddbe6 !important;
  color: #999 !important;
  box-shadow: 0 0 0 0 transparent !important;
}

/deep/ .el-button + .el-button {
  margin-left: 0px;
}

.returnClass {
  float: right;
  margin-right: 10px;
  background: $theme;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff !important;
}

/deep/ .imageClass {
  width: 100%;
  height: 75vh;
  max-width: 100%;
  max-height: 100%;
}
.returnClass:hover {
  color: #ffffff;
  background-color: $theme;
  -webkit-box-shadow: 0 5px 5px 1px rgba(255, 106, 108, 0.25) !important;
  box-shadow: 0 5px 5px 1px rgba(255, 106, 108, 0.25) !important;
}

.audioStyle {
  width: 120px;
  height: 19px;
  background: #f2f5f8;
  border-radius: 20px;
  border: 1px solid #cddbe6;
  line-height: 19px;
  margin-left: 5px;
}

.passAudioStyle {
  font-size: 10px;
  font-weight: 700;
  line-height: 22px;
  height: 22px;
  display: inline-block;
  margin-left: 11px;
}

.themeStyle .buttonClassPlain {
  background: var(--themebtnColor) !important;
  border: 1px var(--themebtnColor) solid !important;
  border-radius: 20px;
}
.themeStyle .is-plain.buttonClassPlain {
  background: #ffffff !important;
  border: 1px var(--themebtnColor) solid !important;
  border-radius: 20px;
}
.themeStyle .buttonClassPlain span {
  color: #ffffff;
  font-weight: 400;
}
.themeStyle .buttonClassPlain.is-plain span {
  color: var(--themebtnColor);
  font-weight: 400;
}
/deep/ .el-tabs--left .el-tabs__nav-wrap.is-left::after {
  display: none;
}
</style>
<style lang="scss" scoped>
.tabsPane .el-tabs__nav-wrap.is-left::after {
  width: 0px !important;
}

/deep/ .el-table {
  th.is-leaf {
    border: 1px solid #eeeeee;
    background: rgba(0, 0, 0, 0.05);
  }

  th > .cell {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
  }

  &.el-table--border {
    border: 1px solid #eeeeee;

    td {
      border: 1px solid #eeeeee;
    }
  }
}

/deep/ .el-tabs__header {
  margin: 0 0 12px;
}
/deep/ .el-tabs__nav {
  // margin-top: 10px;

  .el-tabs__item {
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
  }
}
/deep/ .el-tabs__header.is-left {
  margin-right: 12px !important;
  // padding-top: 40px;
  // padding-bottom: 40px;
}
/deep/ .el-tabs__nav.is-left {
  top: 12px;
  bottom: 12px;
  .el-tabs__item {
    padding: 0;
  }
}
/deep/ .el-collapse {
  height: 100%;
  overflow-y: auto;
  ::-webkit-scrollbar {
    width: 6px;
    height: 8px;
    background: #dcdfe6;
  }
}
/deep/.el-tabs__nav-prev {
  background-color: #f5f7fa;
  color: #c0c4cc;
  // margin-bottom: 12px;
}
/deep/.el-tabs__nav-next {
  background-color: #f5f7fa;
  color: #c0c4cc;
  // margin-top: 12px;
}
// /deep/.el-tabs--left .el-tabs__nav-wrap.is-left.is-scrollable{
//   padding: unset !important;
// }
</style>
